<template>
  <div>
    <!-- 销售回访录入-->
    <TopFilter ref="topFilter" :list="topFilterList" :cols="3" :rows="2" labelWidth="150" :collapse="true" @filterChange="changeHandle"></TopFilter>
    <FilterTable
      ref="table"
      height="500"
      :columns="columns"
      :datakey="'rows'"
      :fetchapi="fetchapi"
      :params="fetchParams"
      selectionType="single"
      columnsRef="clresultEntrysale"
      :onColumnsChange="columns => (this.columns = columns)"
      :onRowSelectChange="onRowSelectChange"
    >
      <template slot="controls">
        <el-button size="small" type="primary" @click="() => this.openHandler('openOwner', {})">车主信息</el-button>
        <el-button size="small" type="primary" @click="() => this.openHandler('openVehicle', {})">车辆信息</el-button>
        <el-button size="small" type="primary" @click="() => this.openHandler('remindInputs', {})">问卷录入</el-button>
      </template>
    </FilterTable>
    <div
      :style="{
        position: 'absolute',
        left: '200px',
        bottom: 0,
        right: 0,
        zIndex: 9,
        borderTop: '1px solid #e9e9e9',
        padding: '10px 20px',
        background: '#fff',
        textAlign: 'center'
      }"
    ></div>
    <!--车主信息-->
    <Drawer :visible.sync="ownerActions.visible" :title="ownerActions.title" width="90%" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <addOwnerPanel :type.sync="ownerActions.type" :resData="this.vinData" @close="closeHandler_owner" />
    </Drawer>
    <!-- 车辆信息 -->
    <Drawer :visible.sync="vehicleActions.visible" :title="vehicleActions.title" width="90%" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <addVehiclePanel :type.sync="vehicleActions.type" :resData="this.vinData" @close="closeHandler_vehicle" />
    </Drawer>
    <!--问卷录入-->
    <Drawer :visible.sync="actions.visible" :title="actions.title" destroyOnClose :width="1300" :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <RemindInputs :type.sync="actions.type" :formData="this.vinData" @close="closeQuestionNaire"></RemindInputs>
    </Drawer>
    <!--明细-->
    <BaseDialog awer :visible.sync="detailActions.visible" :title="detailActions.title" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <saleRemindDetail :type.sync="detailActions.type" :formData="this.vinData" @close="closeHandler_detail"></saleRemindDetail>
    </BaseDialog>
  </div>
</template>

<script>
import { dictionary } from '@/utils/dictMixin';
import { notifyAction, isFormEmpty, findTableItem } from '@/utils';
import RemindInputs from './saleRemindInputs'; // 问卷录入
import { searchRoleByCodes } from '@/api/customerCare/visitAllocation/getVisitInfo';
import saleRemindDetail from './saleRemindDetail'; // 明细
import addOwnerPanel from '@/pages/customerRepair/customerInfo/ownerVehicleManagement/addOwnerPanel.vue'; // 客户档案
import addVehiclePanel from '@/pages/customerRepair/customerInfo/ownerVehicleManagement/addVehiclePanel.vue'; // 客户档案
import { getVisitInfo, getAllUser } from '@/api/customerRepair/saleReturnVisit/resultEntry';
import { searchRoleByCode } from '@/api/common/empSelect/index';
import { jsonToHump } from '@/utils/index';
import dictCode from '@/utils/dictCode';
import { arrayObjDeWeight } from '@/utils/index';
import { getDealerUser } from '@/api/customerRepair/customerComplaint/customerComplaintReception';
import { searchBrand, searchSeries, searchModel, searchApAckAge } from '@/api/customerRepair/customerComplaint/customerComplaintReception';

export default {
  name: 'xiaoshouhuifangzhuyemian',
  components: {
    addOwnerPanel,
    addVehiclePanel,
    RemindInputs,
    saleRemindDetail
  },
  mixins: [dictionary],
  data() {
    this.BaseTable = null;
    this.type = '';
    this.buttonType = '';
    this.vinData = {};
    this.selectData = {};
    return {
      topFilterList: this.createTopFilterList(),
      columns: this.createTableColumns(),
      ownerActions: { title: '', type: '', visible: false }, // 车主界面
      vehicleActions: { title: '', type: '', visible: false }, // 车辆界面
      actions: { visible: false, type: '', title: '' }, // 问卷录入
      detailActions: { visible: false, type: '', title: '' }, // 明细
      fetchapi: getVisitInfo,
      fetchParams: { xhrAbort: false },
      tableDataList: [] // table列表数据
    };
  },
  created() {
    // this.getBrand();
    // this.getEmp();
    // this.getAllUser();
    // this.addQuestionnaireType();
    // 获取客服专员
    this.getCustomerService();
  },
  mounted() {
    this.BaseTable = this.$refs.table;
  }, // todo
  methods: {
    createTopFilterList() {
      return [
        // {
        //   type: 'SELECT',
        //   label: '回访状态',
        //   fieldName: 'returnVisitResults',
        //   itemList: this.createDictList('1592'),
        //   initialValue: 15921001
        // },
        // {
        //   type: 'SELECT',
        //   label: '回访人员',
        //   fieldName: 'returnVisitName',
        //   itemList: []
        // },
        {
          type: 'INPUT',
          label: '客户编号',
          fieldName: 'ownerNo'
        },
        {
          type: 'INPUT',
          label: '客户名称',
          fieldName: 'ownerName'
        },
        // {
        //   type: 'RANGE_DATE',
        //   label: '出库日期',
        //   style: { minWidth: '220px' },
        //   fieldName: 'cjrqBeginDate|cjrqEndDate',
        //   valueFormat: 'yyyy-MM-dd'
        // },
        // {
        //   type: 'RANGE_DATE',
        //   label: '要求完成日期',
        //   style: { minWidth: '220px' },
        //   fieldName: 'cjrqBeginDate1|cjrqEndDate1',
        //   valueFormat: 'yyyy-MM-dd'
        // },
        {
          type: 'INPUT',
          label: 'VIN',
          fieldName: 'vin'
        }
      ];
    },
    createTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        // {
        //   title: '操作',
        //   dataIndex: 'column-action',
        //   width: 70,
        //   render: props => {
        //     return (
        //       <div>
        //         <el-button size="mini" type="text" onClick={() => this.openHandler('detail', props.row)}>
        //           明细
        //         </el-button>
        //       </div>
        //     );
        //   }
        // },
        {
          title: '客户编号',
          dataIndex: 'ownerNo',
          width: 150,
          showOverflowTooltip: true
        },
        {
          title: '客户姓名',
          dataIndex: 'ownerName',
          showOverflowTooltip: true
        },
        {
          title: '客户类型',
          dataIndex: 'ownerProperty',
          showOverflowTooltip: true,
          render: props => {
            return <span>{this.createDictText(props.row.ownerProperty, 8011)}</span>;
          }
        },
        // {
        //   title: '性别',
        //   dataIndex: 'gender',
        //   showOverflowTooltip: true,
        //   render: props => {
        //     return <span>{this.createDictText(props.row.hfjg, '8012')}</span>;
        //   }
        // },
        {
          title: '销售顾问',
          dataIndex: 'salesConsultant',
          showOverflowTooltip: true
        },
        // {
        //   title: '开票日期',
        //   dataIndex: 'invoiceDate',
        //   width: 150,
        //   showOverflowTooltip: true,
        //   dateFormat: 'yyyy-MM-dd HH:mm:ss'
        // },
        // {
        //   title: '出库日期',
        //   dataIndex: 'hfrq1',
        //   width: 150,
        //   showOverflowTooltip: true,
        //   dateFormat: 'yyyy-MM-dd HH:mm:ss'
        // },
        {
          title: 'VIN',
          dataIndex: 'vin',
          showOverflowTooltip: true
        },
        {
          title: '品牌',
          dataIndex: 'brandName',
          showOverflowTooltip: true
        },
        {
          title: '车系',
          dataIndex: 'seriesName',
          showOverflowTooltip: true
        },
        {
          title: '车型',
          dataIndex: 'modelName',
          showOverflowTooltip: true
        },
        {
          title: '地址',
          dataIndex: 'address',
          showOverflowTooltip: true
        },
        {
          title: '客户电话',
          dataIndex: 'phone',
          width: 150,
          showOverflowTooltip: true
        },
        {
          title: '客户手机',
          dataIndex: 'mobile',
          width: 150,
          showOverflowTooltip: true
        },
        // {
        //   title: 'E-mail',
        //   dataIndex: 'email',
        //   width: 150,
        //   showOverflowTooltip: true
        // },
        {
          title: '跟踪状态',
          dataIndex: 'trackStatus',
          showOverflowTooltip: true,
          render: props => {
            return <span>{this.createDictText(props.row.trackStatus, 8058)}</span>;
          }
        },
        {
          title: '跟踪人',
          dataIndex: 'staker',
          width: 150,
          showOverflowTooltip: true
        },
        {
          title: '跟踪日期',
          dataIndex: 'trackDate',
          width: 150,
          showOverflowTooltip: true
        },
        {
          title: '跟踪次数',
          dataIndex: 'trackNum',
          width: 150,
          showOverflowTooltip: true
        },
        {
          title: '录入人',
          dataIndex: 'entered',
          width: 150,
          showOverflowTooltip: true
        },
        {
          title: '录入日期',
          dataIndex: 'enteredDate',
          width: 150,
          showOverflowTooltip: true,
          dateFormat: 'yyyy-MM-dd HH:mm:ss'
        }
      ];
    },
    changeHandle(val) {
      // this.queryMainTableData();
      this.fetchParams = Object.assign({}, val, { xhrAbort: false });
    },
    collapseHandle() {
      this.$nextTick(this.BaseTable.EXECUTE_RESET_HEIGHT);
    },
    // 选中事件
    onRowSelectChange(val) {
      if (!val.length) {
        this.selectData = null;
      } else {
        this.selectData = val[0];
      }
    },
    // 获取客服专员
    async getCustomerService() {
      let roleParm = {
        role: '10071042,10071040'
      };
      const res = await searchRoleByCodes(roleParm);
      this.topFilterList.find(item => item.fieldName === 'returnVisitName').itemList = res.data.map(x => ({ value: x.userId, text: x.employeeName }));
    },
    // 打开窗口
    openHandler(type, val) {
      if (type === 'detail') {
        this.detailActions = { title: '销售回访明细', type: 'show', visible: true };
        this.vinData = this.selectData;
      } else {
        if (isFormEmpty(this.selectData)) {
          return notifyAction('请选择一条数据！', 'warning');
        } else {
          if (type === 'openOwner') {
            if (isFormEmpty(this.selectData.ownerNo)) {
              return notifyAction('车主编号不能为空！', 'warning');
            }
            this.ownerActions = { title: '车主明细', type: 'show', visible: true };
            this.vinData = this.selectData;
          } else if (type === 'openVehicle') {
            if (isFormEmpty(this.selectData.ownerNo)) {
              return notifyAction('车主编号不能为空！', 'warning');
            }
            if (isFormEmpty(this.selectData.vin)) {
              return notifyAction('车辆VIN不能为空！', 'warning');
            }
            this.vehicleActions = { title: '车辆明细', type: 'show', visible: true };
            this.vinData = this.selectData;
          } else if (type === 'remindInputs') {
            if (this.selectData.trackStatus === 80581001) {
              this.actions = { title: '回访信录入', type: 'add', visible: true };
            } else if (this.selectData.trackStatus === 80581002) {
              this.actions = { title: '回访信录入', type: 'edit', visible: true };
            } else {
              this.actions = { title: '回访信录入', type: 'show', visible: true };
            }
            this.vinData = this.selectData;
          }
        }
      }
    },
    // 关闭车主界面
    closeHandler_owner(val) {
      this.ownerActions.visible = val;
    },
    // 关闭车辆界面
    closeHandler_vehicle(val) {
      this.vehicleActions.visible = val;
    },
    // 关闭问卷录入界面
    closeQuestionNaire(val) {
      this.actions.visible = false;
      this.fetchParams = { ...this.fetchParams };
    },
    // 关闭明细界面
    closeHandler_detail(val) {
      this.detailActions.visible = false;
    },

    // 问卷录入
    inputClick() {
      // if (!this.selectFlag) {
      //   this.$message({
      //     type: 'warning',
      //     message: '请选择表单数据!'
      //   });
      // } else {
      //   if (this.selectData.hfzt === 15921003 || this.selectData.hfzt === 15921004) {
      //     this.$message({
      //       type: 'warning',
      //       message: '该回访单已回访!'
      //     });
      //     return false;
      //   }
      //   this.buttonType = 1;
      //   this.questionnaireData = Object.assign(this.questionnaireData, _.cloneDeep(this.selectData));
      //   // jsonToHump(this.questionnaireData);
      //   this.questionnaire = { visible: true, type: 'add', title: '问卷录入' };
      // }
      this.questionnaire = { visible: true, type: 'add', title: '问卷录入' };
    },

    // 查询table主数据
    async queryMainTableData() {
      // console.log('查询table主数据');
      // let formParams = await this.$refs.topFilter.GET_FORM_DATA();
      // formParams[1].visitType = '15721002'; // 售后回访
      // console.log(formParams);
      // this.$refs.table.START_LOADING();
      // try {
      //   let res = await this.fetchApi(formParams[1] || {});
      //   if (res.resultCode == 200) {
      //     this.tableDataList = res.data;
      //   }
      // } catch (err) {
      //   console.log(err, '查询table主数据失败');
      // } finally {
      //   this.$refs.table.STOP_LOADING();
      // }
    },
    async getAllUser() {
      // const res = await getAllUser();
      // let data = arrayObjDeWeight(res.data, 'userId'); // 人员去重(解决前端报错)
      // this.columns.find(item => item.dataIndex === 'hfr').editItems = data.map(x => ({
      //   value: x.userId,
      //   text: x.employeeName
      // }));
    },
    async getEmp() {
      const resAll = await getDealerUser();
      let dataAll = arrayObjDeWeight(resAll.data, 'userId'); // 人员去重(解决前端报错)
      this.columns.find(x => x.dataIndex == 'entered').dictItems = this.columns.find(x => x.dataIndex == 'staker').dictItems = dataAll.data.map(x => ({
        value: x.userId,
        text: x.employeeName
      }));
      let roleParm = {
        role: 10061010
      };
      const res = await searchRoleByCode(roleParm);
      let data = arrayObjDeWeight(res.data, 'userId'); // 人员去重(解决前端报错)
      this.topFilterList.find(item => item.fieldName === 'xsgw').itemList = data.map(x => ({
        value: x.employeeName + '-' + x.userId,
        text: x.employeeName
      }));

      const csParams = {
        role: dictCode.CUSTOMER_SERVICE_SPECIALIST
      };
      const csRes = await searchRoleByCodes(csParams);

      this.topFilterList.find(item => item.fieldName === 'hfr').itemList = csRes.data.map(x => ({
        value: x.userId,
        text: x.employeeName
      }));
    },
    // 增加问卷类型
    addQuestionnaireType() {
      this.questionnaireData = Object.assign(this.questionnaireData, { questionnaireType: '80031001' });
    }
  }
};
</script>

<style scoped lang="less"></style>
